<script lang="ts" setup>

import HeaderMenu from "@/components/HeaderMenu.vue";
import FooterComponent from "@/components/FooterComponent.vue";
import {getCart,deleteCart,confirmPayGoods,editCartNum} from '@/api/goods'
import {ElMessage} from "element-plus";
import {onMounted, ref} from "vue";
import SearchGoods from "@/components/SearchGoods.vue";

onMounted(()=>{
  getAllCart()
})
//获取购物车信息
const cartInfo = ref([])
const cartTotal = ref(0)
const cartTotalPrice = ref(0)
const payGoodsData = ref({
  goodid: [],
  number: [],
  cartId: []
})
const getAllCart = async ()=>{
  let result = await getCart()
  if (result.data.code == 200){
    ElMessage.success("查询购物车成功")
    console.log(result.data.data)
    cartInfo.value = result.data.data
    cartTotal.value = cartInfo.value.length

    cartTotalPrice.value = 0
    cartInfo.value.forEach(cart=>{
      cartTotalPrice.value += cart.price * cart.number
/*      payGoodsData.value.goodid.push(cart.goodid)
      payGoodsData.value.number.push(cart.number)
      payGoodsData.value.cartId.push(cart.id)*/
    })
    // console.log(payGoodsData.value)
  }
}

const goodsNum = ref(1)
const handleChange = (value: number) => {
  console.log(value)
}
const changeNum = (id,number)=>{
  changeCartNum(id,number)
}
//删除购物车
const deleteCartInfo = async (id)=>{
  let result = await deleteCart(id)
  if (result.data.code == 200){
    ElMessage.success("删除购物车成功")
    getAllCart()
  }else {
    ElMessage.error("删除购物车失败")
  }
}
//购买
const payGoodsFun = async ()=>{
  payGoodsData.value.goodid.length = 0
  payGoodsData.value.number.length = 0
  payGoodsData.value.cartId.length = 0
  multipleSelection.value.forEach(cart=>{
    payGoodsData.value.goodid.push(cart.goodid)
    payGoodsData.value.number.push(cart.number)
    payGoodsData.value.cartId.push(cart.id)
  })
  console.log("选中后购买的cart数组：")
  console.log(payGoodsData.value)

  let result = await confirmPayGoods(payGoodsData.value)
  if (result.data.code == 200){
    ElMessage.success("购买成功")
    getAllCart()
  }else {
    ElMessage.error("购买失败")
  }
}
//单次修改购物车数量
const changeCartNum = async (id,num)=>{
  let result = await editCartNum(id,num)
  if (result.data.code == 200){
    ElMessage.success("修改购物车数量成功")
    getAllCart()
  }else {
    ElMessage.error("修改购物车数量失败")
  }
}

//表格部分
interface User {
  date: string
  name: string
  address: string
}

const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<User[]>([])
//清空已选择
const toggleSelection = (rows?: User[]) => {
  selectCartPrice.value = 0
  selectCartNum.value = 0
  if (rows) {
    rows.forEach((row) => {
      // TODO: improvement typing when refactor table
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-expect-error
      multipleTableRef.value!.toggleRowSelection(row, undefined)
    })
  } else {
    multipleTableRef.value!.clearSelection()
  }
}
const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val
  console.log('选择的内容：')
  console.log(multipleSelection.value)

  selectCartPrice.value = 0
  selectCartNum.value = 0
  multipleSelection.value.forEach(cart=>{
    selectCartNum.value += 1
    selectCartPrice.value += cart.price * cart.number
  })
}
const selectCartNum = ref(0)
const selectCartPrice = ref(0)
</script>

<template>
  <body>
  <HeaderMenu></HeaderMenu>
  <SearchGoods></SearchGoods>
  <div class="box">
<!--    <div class="table-wrapper">
        <table class="fl-table">
          <thead>
          <tr>
            <th class="tdone" style="width:316px">序号</th>
            <th class="tdtwo">商品名称</th>
            <th class="tdthree">数量</th>
            <th class="tdfour">单价</th>
            <th class="tdfive">小计</th>
            <th class="tdsix">操作</th>
          </tr>
          </thead>
          <tbody>
          <tr class="trclass" v-for="(cart,index) in cartInfo">
            <td class="tdone"style="width:316px">
              <input  style="border: none;display: none" type="text" name="goodid" v-model="cart.goodid">
              <input  style="border: none" type="text" name="id" v-model="cart.id">
            </td>
            <td class="tdtwo " id="name" >{{ cart.goodsname }}</td>
            <td class="tdthree">
                    <span class="jiajie">
                      <el-input-number v-model="cart.number" :min="1" :max="20" @change="handleChange;changeNum(cart.id,cart.number)" size="small" />
                    </span>
            </td>
            <td class="tdfour"><span class="unit">{{ cart.price }}</span></td>
            <td class="tdfive"><span class="subtal">{{cart.number * cart.price}}</span></td>
            <td class="tdsix">
              <el-button color="#626aef" plain @click="deleteCartInfo(cart.id)">删除</el-button>
            </td>
          </tr>
          <tr class="tr3" style="color: #4e4e4e">
            <td colspan="6" class="talast">商品一共 <span style="color:#ff3e3e;font-size: 18px">{{cartTotal}}</span> 件
              <p> 共计花费<span class="pricetal" style="color:#3c6efd;font-size: 18px">{{cartTotalPrice}}</span> 元</p>
            </td>
          </tr>
          </tbody>
        </table>
        <button @click="payGoodsFun" type="submit" style="border: none; height:40px; width: 100px; background-color:#3c6efd; font-size:18px ;margin-top: 3%;font-family: 仿宋;color: whitesmoke" value="确定购买">
          确定购买</button>
    </div>-->

    <div class="table-wrapper">
      <el-table
          ref="multipleTableRef"
          :data="cartInfo"
          style="width: 100%"
          @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column property="id" label="序号" width="180" />
        <el-table-column property="goodsname" label="商品名称" width="250" />
        <el-table-column property="number" label="数量" width="250" >
          <template #default="scope">
            <el-input-number v-model="scope.row.number" :min="1" :max="50" @change="handleChange;changeNum(scope.row.id,scope.row.number)" size="small" />
          </template>
        </el-table-column>
        <el-table-column property="price" label="单价" width="250" />
        <el-table-column label="小计" width="220">
          <template #default="scope">{{ scope.row.number * scope.row.price }}</template>
        </el-table-column>
        <el-table-column label="操作" >
          <template #default="scope">
            <el-button color="#626aef" plain @click="deleteCartInfo(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="tr3" style="color: #4e4e4e">
        <div colspan="6" class="talast">商品一共 <span style="color:#ff3e3e;font-size: 18px">{{cartTotal}}</span> 件
          <p> 共计花费<span class="pricetal" style="color:#3c6efd;font-size: 18px">{{cartTotalPrice}}</span> 元</p>
        </div>
      </div>
      <div class="tr3" style="color: #4e4e4e">
        <div colspan="6" class="talast">已勾选 <span style="color:#ff3e3e;font-size: 18px">{{selectCartNum}}</span> 件
          <p> 共计花费<span class="pricetal" style="color:#3c6efd;font-size: 18px">{{selectCartPrice}}</span> 元</p>
        </div>
      </div>
      <div style="margin-top: 20px">
<!--        <el-button @click="toggleSelection()">清空已选择</el-button>-->
        <button class="my-button-css" @click="toggleSelection()" type="submit" style="border: none; height:40px; width: 100px; background-color:#ff3e3e; font-size:18px ;margin-top: 3%;font-family: 仿宋;color: whitesmoke" value="清空已选择">清空已选择</button>
        <button class="my-button-css" @click="payGoodsFun" type="submit" style="border: none; height:40px; width: 100px; background-color:#3c6efd; font-size:18px ;margin-top: 3%;font-family: 仿宋;color: whitesmoke" value="确定购买">确定购买</button>
      </div>
    </div>
  </div>
  </body>

  <FooterComponent></FooterComponent>
</template>

<style scoped>
.input_btn01 {
  position: absolute;
}
*{
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}
body {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  /*text-align: center;*/
}
.my-button-css {
  margin: 20px;
  box-sizing: border-box;
}
.my-button-css:hover {
/*  悬浮变小指头*/
  cursor: pointer;
/*  颜色变暗*/
  opacity: 0.8;
}
.tr3{
  font-family: "微软雅黑";
  font-size: 15px;
  color:#2d65d1;
}
.box{
  margin-top: 6%;
}
h1{
  text-align: center;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: white;
  padding: 30px 0;
}
/* Table Styles */
.table-wrapper{
  margin: 50px 70px 70px;
  box-shadow: 0px 35px 50px rgba( 0, 0, 0, 0 );
  text-align: center;
}
.fl-table {
  border-radius: 5px;
  font-size: 12px;
  font-weight: normal;
  border: none;
  border-collapse: collapse;
  width:100%;
  max-width:100%;
  white-space: nowrap;
  background-color: white;
}
.fl-table td, .fl-table th {
  text-align: center;
  padding: 8px;
}
.fl-table td {
  border-right: 1px solid #f8f8f8;
  font-size: 12px;
}
.fl-table thead th {
  color: #ffffff;
  background: #3c6efd;
}
/*.fl-table thead nth-child(odd) {
  color: #ffffff;
  background: #4D605F;
}*/
.fl-table tr:nth-child(even) {
  background: #F8F8F8;
}
/* Responsive */
@media (max-width: 767px) {
  .fl-table {
    display: block;
    width:100%;
  }
  .table-wrapper:before{
    content: "Scroll horizontally >";
    display: block;
    text-align: right;
    font-size: 11px;
    color: white;
    padding: 0 0 10px;
  }
  .fl-table thead, .fl-table tbody, .fl-table thead th {
    display: block;
  }
  .fl-table thead last-child{
    border-bottom: none;
  }
  .fl-table thead {
    float: left;
  }
  .fl-table tbody {
    width:auto;
    position: relative;
    overflow-x: auto;
  }
  .fl-table td, .fl-table th {
    padding: 20px .625em .625em .625em;
    height: 60px;
    vertical-align: middle;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    width: 120px;
    font-size: 13px;
    text-overflow: ellipsis;
  }
  .fl-table thead th {
    text-align: left;
    border-bottom: 1px solid #f7f7f9;
  }
  .fl-table tbody tr {
    display: table-cell;
  }
  .fl-table tbody tr:nth-child(odd) {
    background: none;
  }
  .fl-table tr:nth-child(even) {
    background: transparent;
  }
  .fl-table tr td:nth-child(odd) {
    background: #F8F8F8;
    border-right: 1px solid #E6E4E4;
  }
  .fl-table tr td:nth-child(even) {
    border-right: 1px solid #E6E4E4;
  }
  .fl-table tbody td {
    display: block;
    text-align: center;
  }
}
</style>
